@font-face {
	font-family: Montserrat;
	src:  url("/Fonts/Montserrat/Montserrat-Regular.ttf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: Montserrat Light;
	src:  url("/Fonts/Montserrat/Montserrat-Light.ttf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: SterlingDisplay Roman;
	src:  url("/Fonts/SterlingDisplay Roman/SterlingDisplay Roman.ttf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: Santral;
	src:  url("/Fonts/Santral/Taner Ardali - Santral-Light.otf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: Santral Medium;
	src:  url("/Fonts/Santral/santral-medium.ttf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: Santral Bold;
	src:  url("/Fonts/Santral/santral-semi-bold.ttf") format("opentype");
    font-display:swap;
}

@font-face {
	font-family: Nunito;
	src:  url("/Fonts/Nunito/Nunito-VariableFont_wght.ttf") format("opentype");
    font-display:swap;
}

/*This variable represents the height of the bottom url bar for mobile devices.
This height SHOULD be represented by the built-in variable
env(safe-area-inset-bottom), but this variable is not working as of 10/31/2025. So
we use a fallback of 100px. We use this to hide bottom pop-up menus. On newer
versions of iOS, the bottom nav bar has a transparent background, so we have to
position any pop-up menus below it or else the user will see it.*/
:root {
    --safe-area-bottom: max(env(safe-area-inset-bottom), 100px);
}

body {
    margin: 0px;
    background-color: white;
}

.top-section {
    position: relative;
    height: 166px;
    background: linear-gradient(rgb(230, 230, 230), white 80%);
}

.header {
    position: relative;
    z-index: 3;
}

.decoration-bar {
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: rgb(238, 36, 69);
    z-index: 2;
}

.top-bar {
    position: fixed;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid rgb(200, 200, 200);
    transition: background-color 0.5s;
    z-index: 2;
}

.top-bar-scroll {
    border-bottom: none;
    background-color: rgb(40, 40, 40);
}

.top-bar-scroll > .decoration-bar {
    display: none;
}

.top-bar-scroll ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .user-icon-notification-wrap > .side-menu-icon {
    filter: brightness(0) invert(100%);
}

.top-bar-scroll ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .side-menu-icon {
    filter: brightness(0) invert(100%);
}

.top-bar-scroll ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .side-menu-icon:hover {
    filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
}

.mobile-logo-wrap {
    display: none;
}

.mobile-nav-icon-search-bar-wrap {
    display: none;
}

.mobile-nav-button {
    display: none;
}

.search-bar-wrap {
    position: relative;
    left: 10px;
    display: flex;
    height: 50px;
    width: 30px;
    float: left;
    transition: width 0.3s;
}

    .search-bar-wrap:hover .search-bar-scroll {
        background-color: rgb(60, 60, 60);
    }

.search-bar-wrap-mouseover {
    width: 150px;
}

.search-bar {
    position: relative;
    left: 0px;
    height: 30px;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 0px;
    padding-left: 30px;
    font-family: SterlingDisplay Roman;
    font-size: 16px;
    background-color: transparent;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: background-color 0.5s;
}

    .search-bar-wrap:hover > .search-bar {
        border: 1px solid rgb(180, 180, 180);
    }

.search-bar:focus {
    outline: none;
    border: 1px solid black;
}

.search-bar::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 30px;
    width: 30px;
    background-image: url("https://aurummarketplace.com/Images/x.svg");
    background-size: cover;
}

    .search-bar::-webkit-search-cancel-button:hover {
        cursor: pointer;
        filter: invert(50%);
    }

.search-button {
    position: absolute;
    top: 11px;
    order: -1;
    height: 30px;
    min-width: 30px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
    background-color: transparent;
    border: none;
    transition: background-color 0.5s;
}

.magnifying-glass {
    position: relative;
    top: 1px;
    height: 80%;
    filter: invert(53%) sepia(0%) saturate(1144%) hue-rotate(233deg) brightness(95%) contrast(88%);
}

.magnifying-glass-scroll {
    filter: none;
}

    .magnifying-glass:hover {
        cursor: pointer;
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

.search-bar-scroll {
    color: white;
    border: 1px solid transparent;
}

.mobile-nav-guide-wrap {
    display: none;
    height: 100%;
    width: 30px;
}

.mobile-nav-guide {
    position: relative;
    height: 30px;
    width: 30px;
    margin: auto;
    background-image: url("https://aurummarketplace.com/Images/mobile-nav-icon.svg");
    background-size: cover;
    background-position: 50% 50%;
}

.top-bar-header {
    position: relative;
    left: 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: rgb(60, 60, 60);
    font-family: SterlingDisplay Roman;
    font-size: 20px;
    margin: 0px;
}

.top-bar-header-scroll {
    display: none;
}

.typewriter-link {
    text-decoration: none;
    color: rgb(60, 60, 60);
}

.new-items-drop-wrap {
    position: relative;
    top: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    padding: 2px 10px 2px 10px;
    color: rgb(238, 36, 69);
    font-family: Santral Medium;
    font-size: 14px;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid rgb(238, 36, 69);
    border-radius: 4px;
    transition: color 0.2s,
                background-color 0.2s;
}

    .new-items-drop-wrap:hover {
        cursor: pointer;
    }

.new-items-get-notified {
    position: absolute;
    left: 0px;
    height: calc(100% + 2px);
    width: 0px;
    color: transparent;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
    transition: width 0.3s,
                color 0.3s,
                background-color 0.3s;
}

    .new-items-drop-wrap:hover > .new-items-get-notified {
        width: 100%;
        color: white;
        background-color: rgb(238, 36, 69);
    }

.get-notified-bell {
    position: relative;
    top: 3px;
    height: 18px;
    margin-left: 10px;
}

.get-notified-text {
    position: relative;
    bottom: 1px;
}

.new-items-page-link {
    position: relative;
    top: 3px;
    margin-left: 10px;
    text-decoration: none;
    color: white;
    font-family: Santral Medium;
}

.new-items-get-notified-wrap {
	position: fixed;
	top: 0px;
    display: none;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	width: 100%;
	z-index: 7;
}

.new-items-get-notified-tint {
	position: fixed;
	top: 0px;
	height: 100%;
	width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
	z-index: 5;
}

.new-items-get-notified-window {
    position: relative;
	max-width: 360px;
	padding: 50px;
	margin: auto;
	background-color: white;
	border-radius: 20px;
    z-index: 10;
}

.new-items-get-notified-x-button {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 36px;
  width: 36px;
  background-image: url("https://aurummarketplace.com/Images/x.svg");
  background-size: cover;
  border-radius: 20px;
  transition: background-color 0.3s;
}

  .new-items-get-notified-x-button:hover {
    background-color: rgb(220, 220, 220);
    cursor: pointer;
  }

.new-items-get-notified-header-bell {
    position: relative;
    margin-bottom: 10px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    filter: invert(40%) sepia(94%) saturate(7355%) hue-rotate(341deg) brightness(99%) contrast(88%);
}

.new-items-get-notified-header {
    display: inline-block;
    margin: 0px;
    margin-bottom: 10px;
    color: rgb(238, 36, 69);
    font-family: Santral Medium;
    font-size: 24px;
    font-weight: 500;
}

.new-items-get-notified-text {
	color: rgb(60, 60, 60);
	font-family: Santral Medium;
	font-size: 14px;
}

.new-items-get-notified-input-label-wrap {
    position: relative;
}

.new-items-get-notified-label {
    display: inline-block;
    height: 20px;
    margin-top: 10px;
    color:rgb(60, 60, 60);
    font-family: Santral Medium;
    font-size: 14px;
}

.new-items-get-notified-text-box {
    height: 40px;
    width: 100%;
    box-shadow: 0px 0px 10px -9px black;
    border: 1px solid rgba(40, 40, 40, 0.2);
    border-radius: 5px;
    transition: margin-bottom 0.2s;
}

.new-items-get-notified-invalid-email {
    position: absolute;
    bottom: 0px;
    display: none;
    color: red;
    font-family: Santral;
    font-size: 12px;
}

.new-items-get-notified-button {
    height: 30px;
    margin-top: 10px;
    color: white;
    font-family: Santral Medium;
    background-color: rgb(20, 20, 20);
    border-radius: 10px;
    border: none;
}

.new-items-get-notified-button:hover {
    cursor: pointer;
    background-color: rgb(60, 60, 60);
}

.side-menu-tint {
    position: fixed;
    top: 0px;
    display: none;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.side-menu-icon-wrap {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 50px;
    width: 250px;
    display: flex;
    justify-content: center;
    float: right;
    transition: width 0.3s;
    z-index: 6;
}

.side-menu-icon-wrap-active {
    width: max(26vw, 400px);
}

.side-menu-icon-wrap-active > .side-menu-icon-individual-wrap > .user-icon-notification-wrap > .side-menu-icon {
    filter: brightness(0) invert(100%);
}

.side-menu-icon-wrap-active > .side-menu-icon-individual-wrap > .side-menu-icon {
    filter: brightness(0) invert(100%);
}

.side-menu-icon-wrap-active > .side-menu-icon-individual-wrap > .user-icon-notification-wrap > .side-menu-icon:hover {
    filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
}

.side-menu-icon-wrap-active > .side-menu-icon-individual-wrap > .side-menu-icon:hover {
    filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
}

.side-menu-icon-wrap-background {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 0px;
    background-color: rgb(40, 40, 40);
    transition: width 0.3s;
    z-index: -1;
}

.side-menu-icon-wrap-background-active {
    width: 100%;
}

.side-menu-icon-individual-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    transition: box-shadow 0.3s;
}

    .side-menu-icon-individual-wrap:hover {
        cursor: pointer;
    }

.side-menu-icon {
    position: relative;
    height: 32px;
    width: 32px;
    margin-top: auto;
    margin-bottom: auto;
}

    .side-menu-icon:hover {
        cursor: pointer;
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

.user-icon-notification-wrap {
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}

.user-icon-notification {
    position: absolute;
    top: 1px;
    right: 3px;
    display: none;
    flex-direction: column;
    justify-content: center;
    height: 14px;
    width: 14px;
    text-align: center;
    color: white;
    font-family: Montserrat;
    font-size: 10px;
    background-color: rgb(238, 36, 69);
    border-radius: 6px;
}

    .user-icon-notification:hover {
        cursor: pointer;
    }

.side-menu {
    position: fixed;
    top: 50px;
    right: 0px;
    height: 100%;
    width: max(26vw, 400px);
    opacity: 0;
    background-color: white;
    pointer-events: none; /*Stops the invisible side menu from preventing clicks
                            to elements below it.*/
    transition: opacity 0.4s;
    z-index: 6;
}

.side-menu-active {
    opacity: 1;
    pointer-events: all;
}

.side-menu-content {
    position: relative;
    top: 0px;
    height: 100%;
    width: 100%;
}

.tint {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.x-button-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 36px;
    width: 36px;
    border-radius: 20px;
    z-index: 1;
}

    .x-button-wrap:hover {
        background-color: rgb(220, 220, 220);
        transition: background-color 0.3s;
    }

.x-button {
    display: block;
    height: 100%;
    width: 100%;
    background-image: url("https://aurummarketplace.com/Images/x.svg");
    background-size: cover;
}

    .x-button:hover {
        cursor: pointer;
    }

.loading-pulse-container {
    margin-top: 20px;
}

.loading-pulse-container-sign-in {
    margin-top: 0px;
    padding-top: 50px;
}

.loading-pulse {
    position: relative;
    background: repeating-linear-gradient(to right, white 0%, rgb(220, 220, 220) 50%, white 100%);
    background-size: 200% auto;
    background-position: 0 100%;
    animation: gradient 1.5s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    border-radius: 100px;
}
    
@keyframes gradient { 
    0%   { background-position: 0 0; }
    100% { background-position: -200% 0; }
}

.loading-header {
    left: 10%;
    height: 24px;
    width: 80%;
    margin-bottom: 10px;
}

.loading-header-short {
    left: 10%;
    height: 24px;
    width: 60%;
    margin-bottom: 10px;
}

.loading-header-create-account {
    left: 10%;
    height: 24px;
    width: 20%;
    margin-top: 60px;
}

.loading-header-sign-in {
    left: 10%;
    height: 24px;
    width: 16%;
    margin-top: 10px;
}
    
.favorite-item-sign-in-header {
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    z-index: 1;
}

.favorite-item-sign-in-header > p {
    margin: 0px 0px 4px 0px;
    font-family: SterlingDisplay Roman;
    font-size: 30px;
}

.sign-in-button {
    display: inline-block;
    color: rgb(238, 36, 69);
    font-family: Nunito;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.sign-in-button:after {
    height: 2px;
    width: 100%;
    display: block;
    content: '';
    line-height: 50px;
    border-bottom: 1px solid rgb(238, 36, 69);
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

    .sign-in-button:hover:after {
        transform: scaleX(1);
    }

.signed-in-user-wrap {
    position: relative;
    left: 10%;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    height: 100%;
    width: 80%;
    box-sizing: border-box;
}

.signed-in-header {
    position: relative;
    font-family: SterlingDisplay Roman;
    font-size: 36px;
}

.signed-in-link {
    display: inline-block;
    margin-top: 40px;
    color: black;
    font-family: Santral;
    font-size: 14px;
    text-decoration: none;
}

.signed-in-link > span {
    position: relative;
    display: inline-block;
}

.signed-in-link > span:after {
    height: 2px;
    width: 100%;
    display: block;
    content: '';
    line-height: 50px;
    border-bottom: 1px solid rgb(238, 36, 69);
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

.signed-in-link > span:hover:after {
    transform: scaleX(1);
}

    .signed-in-link:hover {
        cursor: pointer;
    }

.user-menu-notification {
    display: none;
}

.user-menu-notification-active {
    position: relative;
    bottom: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 18px;
    text-align: center;
    font-family: Montserrat;
    font-size: 10px;
    color: white;
    background-color: rgb(238, 36, 69);
    border-radius: 4px;
}

.message-notification {
    bottom: 1px;
}

.signed-in-arrow {
    position: relative;
    top: 1px;
    height: 10px;
    width: 10px;
    object-fit: contain;
}

.speed-up-checkout {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    width: 80%;
    z-index: 1;
}

.speed-up-checkout > h6 {
    margin: 0px 0px 4px 0px;
    font-family: SterlingDisplay Roman;
    font-size: 30px;
    font-weight: 100;
}

.speed-up-checkout > p {
    margin: 0px 0px 4px 0px;
    font-family: Nunito;
    font-size: 14px;
    font-weight: 100;
}

.sign-in-arrow {
    position: relative;
    top: 1px;
    height: 10px;
    width: 10px;
    object-fit: contain;
    filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
}

.side-menu-item-checkout-wrap {
    height: calc(100% - 185px);
}

.side-menu-item-window {
    position: relative;
    height: 76%;
    width: 86%;
    margin: auto;
    margin-top: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.side-menu-item-window > p {
    position: relative;
    left: 3.5%;
    margin: 40px 0px 4px 0px;
    font-family: Nunito;
    font-size: 14px;
    font-weight: 100;
}

.side-menu-item-window::-webkit-scrollbar {
    background-color: transparent;
    width: 4px;
}

.side-menu-item-window::-webkit-scrollbar-thumb {
    background-color: rgb(172, 170, 170);
    border-radius: 2px;
}

.side-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.5);
}

.side-menu-item-1 {
    border-top: 1px solid rgba(40, 40, 40, 0.5);
}

.side-menu-item-carousel-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.side-menu-item-carousel {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
}

.side-menu-product-image {
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

    .side-menu-product-image:hover {
        cursor: pointer;
    }

.side-menu-product-image-active {
    display: block;
}

.button-left-overlay {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 12%;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    border: none;
    border-radius: 10px 0px 0px 10px;
}

    .button-left-overlay:hover img{
        filter: brightness(0%);
    }

.triangle-left {
    position: relative;
    height: 14px;
    width: 14px;
}

.button-right-overlay {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 12%;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    border: none;
    border-radius: 0px 10px 10px 0px;
}

    .button-right-overlay:hover img{
        filter: brightness(0%);
    }

.triangle-right {
    position: relative;
    height: 14px;
    width: 14px;
}

    .button-overlay:hover {
        cursor: pointer;
    }

.side-menu-item-information {
    padding-left: 10px;
    padding-right: 10px;
}

.side-menu-offer-accepted-notification {
    color: rgb(81, 226, 45);
    font-family: Santral;
    font-size: 12px;
}

.side-menu-status-notification {
    color: rgb(120, 120, 120);
    font-family: Santral;
    font-size: 14px;
    font-weight: bold;
}

.side-menu-status-notification-sold {
    color:rgb(230, 45, 45);
}

.side-menu-item-title {
    display: -webkit-box;
    margin: 0px;
    color: rgb(40, 40, 40);
    font-family: Nunito;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-menu-item-title-link {
    text-decoration: none;
}

    .side-menu-item-title-link:hover {
        cursor: pointer;
    }

.side-menu-item-price {
    margin: 4px 0px 0px 0px;
    color: rgb(40, 40, 40);
    font-family: Nunito;
    font-size: 12px;
}

.shopping-bag-quantity {
    position: absolute;
    bottom: 38px;
    display: none;
    margin: 0px;
    color: rgb(40, 40, 40);
    font-family: Santral;
    font-size: 12px;
}

.side-menu-remove-button {
    position: absolute;
    bottom: 24px;
    display: inline-block;
    color: rgb(40, 40, 40);
    font-family: Santral;
    font-size: 12px;
    text-decoration: none;
}

    .side-menu-remove-button:hover {
        cursor: pointer;
    }

.total-price-checkout-button-wrap {
    position: absolute;
    bottom: 80px;
    width: 100%;
    background-color: white;
}

.shopping-bag-total-price {
    margin: 10px 0px 10px 0px;
    text-align: center;
    color: rgb(40, 40, 40);
    font-family: Santral Medium;
    font-size: 16px;
}

.checkout-link {
    text-decoration: none;
}

.shopping-bag-total-price-button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
    width: 90%;
    margin: auto;
    text-align: center;
    color: white;
    font-family: Montserrat Light;
    font-size: 16px;
    background-color: rgb(40, 40, 40);
    transition: background-color 0.3s;
}

    .shopping-bag-total-price-button:hover {
        cursor: pointer;
        background-color: rgb(238, 36, 69);
    }

.shopping-bag-header {
    position: relative;
    margin: 80px 20px 20px 40px;
    color: rgb(40, 40, 40);
    font-family: SterlingDisplay Roman;
    font-size: 40px;
    font-weight: 100;
}

.shopping-bag-paragraph {
    position: relative;
    margin: 20px 20px 20px 60px;
    color: rgb(40, 40, 40);
    font-family: Santral;
    font-size: 20px;
}

.favorite-items-header {
    position: relative;
    margin: 80px 20px 20px 40px;
    color: rgb(40, 40, 40);
    font-family: SterlingDisplay Roman;
    font-size: 40px;
    font-weight: 100;
    display: none;
}

.loading-spinner {
    height: 50px;
    width: 50px;
    margin-left: 10%;
}

.favorite-items-paragraph {
    position: relative;
    margin: 20px 20px 20px 60px;
    color: rgb(40, 40, 40);
    font-family: Santral;
    font-size: 20px;
    display: none;
}

.user-login-header {
    position: relative;
    left: 10%;
    width: 70%;
    margin: 0px 20px 20px 0px;
    padding-top: 150px;
    color: rgb(40, 40, 40);
    font-family: SterlingDisplay Roman;
    font-size: 36px;
    font-weight: 100;
    line-height: 1.5;
}

.user-login-paragraph {
    position: relative;
    left: 10%;
    width: 70%;
    margin: 20px 20px 20px 0px;
    font-family: Nunito;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.7;
}

.user-login-create-account-button {
    position: relative;
    left: 10%;
    display: inline-block;
    margin-top: 20px;
    color: rgb(238, 36, 69);
    font-family: Nunito;
    font-size: 14px;
    text-decoration: none;
}

    .user-login-create-account-button:hover {
        cursor: pointer;
    }

.user-login-create-account-button:after {
    height: 2px;
    width: 100%;
    display: block;
    content: '';
    line-height: 50px;
    border-bottom: 1px solid rgb(238, 36, 69);
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

    .user-login-create-account-button:hover:after {
        transform: scaleX(1);
    }

.user-login-sign-in-button {
    position: relative;
    left: 10%;
    display: inline-block;
    margin-top: 40px;
    color: rgb(238, 36, 69);
    font-family: Nunito;
    font-size: 14px;
    text-decoration: none;
}

    .user-login-sign-in-button:hover {
        cursor: pointer;
    }

.user-login-sign-in-button:after {
    height: 2px;
    width: 100%;
    display: block;
    content: '';
    line-height: 50px;
    border-bottom: 1px solid rgb(238, 36, 69);
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

    .user-login-sign-in-button:hover:after {
        transform: scaleX(1);
    }

.from-left:after {
    transform-origin: 0% 50%;
}

.side-menu .sign-in-window {
	display: block;
	position: relative;
	top: 0;
	left: auto;
	right: 0;
	height: calc(100% - 3.25em);
	height: 100%;
	width: min(100%, 500px);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	visibility: visible;
	transform: translateY(100%);
    background-color: white;
	scroll-behavior: smooth;
    z-index: 10;
	opacity: 1;
	transition: opacity 0.2s;
}

.side-menu .sign-in-window-active {
	display: block;
	transform: translateY(0%);
}

.side-menu .sign-in-section {
	margin: 0 0 10em 0;
}

.side-menu .sign-in-header {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 100%;
    text-align: center;
    font-family: Montserrat Light;
    font-size: 24px;
}

.side-menu .table-wrap {
	width: 90%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.side-menu .email-confirmation-wrap {
	display: none;
}	

.side-menu .email-confirmation-header {
	display: flex;
	position: relative;
	width: calc(100% - min(10%, 4em));
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	color: rgb(40, 40, 40);
	font-family: Santral;
	font-size: 16px;
	line-height: 1.19em;
}

.side-menu .email-confirmation-text {
	display: flex;
	position: relative;
	width: calc(100% - min(10%, 4em));
	max-width: 400px;
	margin: 1em auto 2em auto;
	color: rgb(40, 40, 40);
	font-family: Santral;
	font-size: 16px;
	line-height: 1.19em;
}

.side-menu .email-link-button {
	width: 80%;
	margin: 2.25em auto 0 auto;
}

.side-menu .login-table-header {
    position: relative;
    display: flex;
    justify-content: center;
    margin: auto;
    height: 50px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.2);
}

.side-menu .selection-header {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: Santral;
    font-size: 16px;
}

	.side-menu .selection-header:hover {
		cursor: pointer;
	}

	.side-menu .selection-header:hover > span {
		background-color: rgb(240, 240, 240);
	}

.side-menu .selection-header-text {
    margin: auto;
    padding: 6px 12px 8px 12px;
    border-radius: 10px;
    transition: background-color 0.2s;
}

.side-menu .selection-shadow {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 5px;
    width: 50%;
    box-shadow: inset 0 -5px 0 rgb(238, 36, 69);
    transition: transform 0.2s;
    z-index: -1;
    transform: none;
}

.side-menu .login-table {
	width: auto;
	margin: auto;
}

.side-menu .window {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.side-menu .window-active {
    position: relative;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.2s;
}

.side-menu .login-window {
    margin-top: 30px;
}

.side-menu .login-form {
	margin: 0 0 0.5em 0;
}

.side-menu .create-account-window {
    margin-top: 30px;
}

.side-menu .create-account-form {
	margin: 0 0 0.5em 0;
}

.side-menu .text-box-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: left;
	margin-top: 1.5em;
}

.side-menu .label {
    padding-bottom: 6px;
    font-family: Santral;
    font-size: 12px;
}

.side-menu .account-text-box {
    height: 40px;
    width: 100%;
    padding-left: 4px;
    box-shadow: 0px 0px 10px -9px black;
    border: 1px solid rgba(40, 40, 40, 0.2);
    border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.side-menu .see-password-button {
	display: none;
	position: absolute;
	top: 30px;
	right: 10px;
	height: 30px;
	width: 30px;
	background-image: url("https://aurummarketplace.com/Images/see-password-eye.svg");
	background-size: cover;
	filter: invert(69%) sepia(0%) saturate(0%) hue-rotate(197deg) brightness(94%) contrast(86%);
}

	.side-menu .see-password-button:hover {
		cursor: pointer;
		filter: invert(20%) sepia(1%) saturate(0%) hue-rotate(15deg) brightness(92%) contrast(83%);
	}

.warning {
    display: inline-block;
    max-height: 0px;
    color: red;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.warning-active {
    max-height: 20px;
}

.side-menu .button-wrap {
	height: 40px;
	width: 100%;
	display: flex;
	justify-content: left;
	margin-top: 20px;
}

.side-menu .asterisk-caption {
    position: relative;
    font-family: Santral;
    font-size: 12px;
    margin-top: 10px;
}

.side-menu .all-forms-not-filled-warning {
	position: relative;
	display: none;
	bottom: -4px;
	padding: 0 0 0 0.1em;
	color: red;
	font-family: Santral;
	font-size: 16px;
	font-weight: bold;
}

.side-menu .checkbox {
	height: 18px;
	width: 18px;
    margin: auto 7px auto 0px;
	border: 1px solid rgb(200, 200, 200);
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

	.side-menu .checkbox:hover {
		cursor: pointer;
	}

	.side-menu .checkbox:hover + .remember-me-label {
        background-color: transparent;
    }

.side-menu .checkbox:active {
    background-color: rgb(200, 200, 200);
}

.side-menu .checkbox:checked {
    background-image: url("https://aurummarketplace.com/Images/check.svg");
    background-size: cover;
    background-color: transparent;
	border: 1px solid rgb(200, 200, 200);
}

.side-menu .checkbox-label {
	position: relative;
	font-family: Nunito;
	font-size: 14px;
    color: rgb(60, 60, 60);
	margin-top: auto;
	margin-bottom: auto;
}

	.side-menu .checkbox-label:hover {
		cursor: pointer;
	}

.side-menu .remember-me-section {
	width: 100%;
	display: flex;
	justify-content: left;
}

.side-menu .remember-me-label {
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}
	
	.side-menu .remember-me-label:hover {
		color: rgb(100, 100, 100);
        background-color: transparent;
	}

.side-menu .forgot-password-link-wrap {
	display: flex;
	justify-content: right;
	width: 100%;
}

.side-menu .forgot-password-text {
	position: relative;
	display: inline-block;
	width: auto;
	margin-top: auto;
	margin-bottom: auto;
	color: rgb(60, 60, 60);
	font-family: Nunito;
	font-size: 14px;
	text-decoration: underline;
}

    .side-menu .forgot-password-text:hover {
        color: rgb(100, 100, 100);
    }

.side-menu .button {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
    color: white;
    font-family: Montserrat Light;
    font-size: 16px;
    background-color: rgb(40, 40, 40);
    border: none;
    transition: background-color 0.5s;
}

    .side-menu .button:hover {
        cursor: pointer;
        background-color: rgb(100, 100, 100);
    }

.logo {
    position: absolute;
    left: calc(50% - 48px);
    height: 96px;
    width: 96px;
    background-image: url("https://aurummarketplace.com/Images/logo-buffer-solid.svg");
    background-size: cover;
    filter: brightness(90%);
    transform: translateY(-2px);
    transition: background-image 0.5s,
                transform 1s;
    z-index: 5;
}

    .logo:hover {
        cursor: pointer;
        background-image: url("https://aurummarketplace.com/Images/logo-buffer-hover.svg");
}

.logo-transform {
    background-image: url("https://aurummarketplace.com/Images/logo-buffer-transform.svg");
    transform: scale(0.58)
               translateY(7px);
    filter: brightness(100%);
}

    .logo-transform:hover {
        background-image: url("https://aurummarketplace.com/Images/logo-buffer-transform-hover.svg");
    }

.navigation-bar {
    position: relative;
    top: 100px;
    left: 50%;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.0);
    color: rgb(60, 60, 60);
    transform: translate(-50%, 0);
    z-index: 4;
}

.navigation-bar-scroll {
    position: fixed;
    top: 1px;
    left: 50%;
    height: 50px;
    color: rgb(240, 240, 240);
    transform: translate(-50%, 0);
}

.nav-bar-mobile {
    display: none;
}

.nav-bar-socials-wrap {
    display: none;
}

.navigation-bar-mobile-tint {
    display: none;
}

.nav-x-button-wrap {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    height: 18px;
    width: 18px;
    padding: 5px;
    border-radius: 14px;
    z-index: 1;
}

.nav-x-button {
    height: 18px;
    width: 18px;
    filter: invert(20%) sepia(0%) saturate(7%) hue-rotate(147deg) brightness(100%) contrast(89%);
}

.pop-up-back-button-wrap {
    display: none;
}

.nav-option-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 160px;
}

.nav-option-wrap-scroll {
    min-width: 132px;
}

.nav-option-wrap-center {
    transition: min-width 0.5s;
}

.nav-option-wrap-center-scroll {
    min-width: 50px;
}

.nav-option-wrap-6 {
    display: none;
}

.nav-option-wrap-7 {
    display: none;
}

.nav-option {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    min-height: 17px;
    text-align: center;
    font-family: Santral;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    color: rgb(60, 60, 60);
    transition: background-color 0.5s,
                border-bottom 0.1s;
    z-index: 2;
}

    .nav-option:hover {
        cursor: pointer;
        color: rgb(238, 36, 69);
    }

    #nav-option-1:hover .nav-arrow {
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

    #nav-option-2:hover .nav-arrow {
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

    #nav-option-3:hover .nav-arrow {
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

    #nav-option-4:hover .nav-arrow {
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

    #nav-option-5:hover .nav-arrow {
        filter: invert(35%) sepia(73%) saturate(7131%) hue-rotate(338deg) brightness(95%) contrast(95%);
    }

.nav-option-scroll {
    height: 100%;
    color: white;
}

.nav-option-mobile-dropdown-list {
    display: none;
}

.nav-text {
    position: relative;
    display: inline-block;
    margin: 0px;
}

.nav-arrow {
    position: relative;
    display: none;
    height: 8px;
    width: 8px;
    background-image: url("https://aurummarketplace.com/Images/Down\ Arrow\ Nav.svg");
    background-size: cover;
    filter: invert(13%) sepia(55%) saturate(0%) hue-rotate(272deg) brightness(202%) contrast(87%);
}

.nav-down-arrow-scroll {
    filter: invert(100%) sepia(67%) saturate(8%) hue-rotate(181deg) brightness(114%) contrast(88%);
}

.nav-arrow-6 {
    display: none;
}

.nav-arrow-7 {
    display: none;
}

.navigation-bar-mobile-content {
    display: none;
    width: 90%;
    padding: 20px 0px 0px 20px;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid rgb(0, 0, 0, 0.22);
}

.nav-option-mobile {
    display: flex;
    justify-content: left;
    height: 30px;
    font-family: SterlingDisplay Roman;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
}

.nav-mobile-icon {
    position: relative;
    top: 0px;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.nav-text-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px;
}

.nav-dropdown-container {
    position: relative;
    top: 100px;
    height: 360px;
    width: 100%;
    visibility: hidden;
    z-index: 10;
}

.nav-dropdown-container-active {
    visibility: visible;
}

.nav-dropdown-container-scroll {
    visibility: hidden;
}

.nav-dropdown {
    position: absolute;
    top: 29px;
    height: 340px;
    width: 100%;
    background-color: rgb(250, 250, 250);
    box-shadow: inset 0px 0px 8px -2px rgba(0, 0, 0, 0.5);
    transition: visibility 0.2s,
                opacity 0.2s,
                transform 0.2s,
                top 0.2s;
}

.nav-dropdown-ring {
    opacity: 0;
    z-index: -2;
}

.nav-dropdown-bracelet {
    opacity: 0;
    z-index: -2;
}

.nav-dropdown-necklace {
    opacity: 0;
    z-index: -2;
}

.nav-dropdown-earring {
    opacity: 0;
    z-index: -2;
}

.nav-dropdown-pendant {
    opacity: 0;
    z-index: -2;
}

.nav-dropdown-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(20px);
    z-index: 3;
}

.nav-dropdown-scroll {
    position: fixed;
    top: 30px;
    transform: translateY(20px);
}

.dropdown-sections-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dropdown-left {
    position: relative;
    height: calc(100% - 80px);
    padding-top: 20px;
    padding-bottom: 10px;
}

.dropdown-right {
    position: relative;
    display: flex;
    padding-top: 20px;
    padding-bottom: 10px;
}

.nav-dropdown-x-button {
    position: absolute;
    left: -40px;
    height: 36px;
    width: 36px;
    border-radius: 20px;
    transition: background-color 0.3s;
}

    .nav-dropdown-x-button:hover {
        cursor: pointer;
        background-color: rgb(220, 220, 220);
    }

.dropdown-left-title {
    display: inline-block;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
}

.dropdown-left-column {
    height: calc(100% - 20px);
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-left-list-wrap {
    display: flex;
    column-gap: 10px;
}

.dropdown-left-list {
    list-style: none;
    color: rgb(40, 40, 40);
    font-family: Montserrat;
    font-size: 14px;
    padding: 0px;
}

.dropdown-right-column-1 {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-right-column-2 {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.dropdown-right-column-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    row-gap: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.dropdown-right-column-1-title {
    display: inline-block;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
}

.dropdown-right-column-2-title {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
    white-space: nowrap;
}

.dropdown-right-column-1-list {
    list-style: none;
    color: rgb(40, 40, 40);
    font-family: Montserrat;
    font-size: 14px;
    padding: 0px;
}

.dropdown-right-column-2-list {
    list-style: none;
    color: rgb(40, 40, 40);
    font-family: Montserrat;
    font-size: 14px;
    padding: 0px;
}

.dropdown-list-item {
    padding-bottom: 10px;
}

.dropdown-list-item-form {
    margin: 0px;
}

.dropdown-list-item-text {
    display: inline-block;
    padding: 0px;
    text-decoration: none;
    color: rgb(80, 80, 80);
    font-family: Montserrat;
    font-size: 14px;
    white-space: nowrap;
    background-color: transparent;
    border: none;
}

.dropdown-list-item-text:after {
    position: relative;
    bottom: 2px;
    height: 2px;
    width: 100%;
    display: block;
    content: '';
    border-bottom: 1px solid rgb(238, 36, 69);
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

    .dropdown-list-item-text:hover {
        cursor: pointer;
    }

    .dropdown-list-item-text:hover:after {
        transform: scaleX(1);
    }

.dropdown-right-featured-box {
    position: relative;
    height: 100%;
    max-height: 110px;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.dropdown-right-featured-box:before {
    content: "";
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s,
                background-image 0.5s;
}

.dropdown-right-featured-box:hover:before {
    filter: brightness(0%) invert(50%);
}

.dropdown-right-featured-box-ring-1:before {
    background-image: url("https://aurummarketplace.com/Images/svg-neil-lane.svg");
    background-size: 40%;
    background-position: 50% 0%;
}

    .dropdown-right-featured-box-ring-1:hover:before {
        cursor: pointer;
        background-size: 50%;
    }

.dropdown-right-featured-box-ring-2:before {
    background-image: url("https://aurummarketplace.com/Images/svg-citrine-ring.svg");
    background-size: 60%;
    background-position: 50% 20%;
}

    .dropdown-right-featured-box-ring-2:hover:before {
        cursor: pointer;
        background-size: 70%;
    }

.dropdown-right-featured-box-bracelet-1:before {
    background-image: url("https://aurummarketplace.com/Images/svg-tourmaline-bangle.svg");
    background-size: 80%;
    background-position: 50% 60%;
    background-repeat: no-repeat;
}

    .dropdown-right-featured-box-bracelet-1:hover:before {
        cursor: pointer;
        background-size: 90%;
    }

.dropdown-right-featured-box-bracelet-2:before {
    background-image: url("https://aurummarketplace.com/Images/svg-jabel-diamond-bracelet.svg");
    background-size: 80%;
    background-position: 50% 60%;
}

    .dropdown-right-featured-box-bracelet-2:hover:before {
        cursor: pointer;
        background-size: 90%;
    }

.dropdown-right-featured-box-necklace-1:before {
    background-image: url("https://aurummarketplace.com/Images/svg-pearl-necklace.svg");
    background-size: 100%;
    background-position: 50% 50%;
}

    .dropdown-right-featured-box-necklace-1:hover:before {
        cursor: pointer;
        background-size: 120%;
    }

.dropdown-right-featured-box-necklace-2:before {
    background-image: url("https://aurummarketplace.com/Images/svg-strand-necklace.svg");
    background-size: 80%;
    background-position: 50% 100%;
}

    .dropdown-right-featured-box-necklace-2:hover:before {
        cursor: pointer;
        background-size: 90%;
    }

.dropdown-right-featured-box-earring-1:before {
    background-image: url("https://aurummarketplace.com/Images/svg-stud-earrings.svg");
    background-size: 40%;
    background-position: 50% 0%;
    transition: background-size 0.5s;
}

    .dropdown-right-featured-box-earring-1:hover:before {
        cursor: pointer;
        background-size: 50%;
    }

.dropdown-right-featured-box-earring-2:before {
    background-image: url("https://aurummarketplace.com/Images/svg-gemstone-earrings.svg");
    background-size: 40%;
    background-position: 50% 50%;
}

    .dropdown-right-featured-box-earring-2:hover:before {
        cursor: pointer;
        background-size: 50%;
    }

.dropdown-right-featured-box-pendant-1:before {
    background-image: url("https://aurummarketplace.com/Images/svg-gemstone-pendant.svg");
    background-size: 70%;
    background-position: 50% 110%;
}

    .dropdown-right-featured-box-pendant-1:hover:before {
        cursor: pointer;
        background-size: 80%;
    }

.dropdown-right-featured-box-pendant-2:before {
    background-image: url("https://aurummarketplace.com/Images/svg-halo-pendant.svg");
    background-size: 100%;
    background-position: 50% 105%;
}

    .dropdown-right-featured-box-pendant-2:hover:before {
        cursor: pointer;
        background-size: 110%;
    }

.dropdown-right-featured-caption {
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 24px;
    width: 100%;
    text-align: center;
    color: white;
    font-family: Nunito;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.nav-dropdown-button-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px;
    width: 1034px;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    font-family: Montserrat Light;
    font-size: 24px;
    color: white;
    background-color: rgb(40, 40, 40);
    transition: background-color 0.2s;
}

.nav-dropdown-button-main:hover {
    cursor: pointer;
    background-color: rgb(238, 36, 69);
}

.dropdown-right-option {
    display: flex;
    justify-content: left;
    min-width: 200px;
}

.mobile-scroll-icon-wrap {
    display: none;
}

/*Resend email confirmation styles*/
.confirmation-already-sent-wrap {
	position: fixed;
	top: 0px;
	display: none;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	width: 100%;
	z-index: 3;
}

.confirmation-already-sent-container {
    position: relative;
	max-width: 400px;
	padding: 50px;
	margin: auto;
	color: rgb(60, 60, 60);
	font-family: Santral Medium;
	font-size: 14px;
	background-color: white;
	border-radius: 20px;
    z-index: 10;
}

.confirmation-already-sent-x-button {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 36px;
  width: 36px;
  background-image: url("https://aurummarketplace.com/Images/x.svg");
  background-size: cover;
  border-radius: 20px;
  transition: background-color 0.3s;
}

  .confirmation-already-sent-x-button:hover {
    background-color: rgb(220, 220, 220);
    cursor: pointer;
  }


.resend-confirmation-email-button {
    position: relative;
    display: block;
    margin-top: 20px;
    padding: 10px;
    color: white;
    font-family: Santral Medium;
    font-size: 12px;
    background-color: rgb(20, 20, 20);
    border: none;
    border-radius: 10px;
    transition: padding-left 0.2s,
                background-color 0.3s;
}

    .resend-confirmation-email-button:hover {
        cursor: pointer;
        background-color: rgb(238, 36, 69);
    }

.email-confirmation-wrap {
    width: 90%;
    margin: auto;
}

.email-confirmation-checkmark {
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: middle;
    background-image: url("https://aurummarketplace.com/Images/check.svg");
    background-size: cover;
}

.email-confirmation-header {
    vertical-align: middle;
    color: rgb(238, 36, 69);
    font-family: Santral Medium;
    font-size: 16px;
}

.email-confirmation-text {
    margin-top: 16px;
    font-family: Santral Medium;
    font-size: 14px;
}

.email-link-button {
    display: inline-block;
    height: 40px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 16px;
    text-decoration: none;
    background-color: rgb(20, 20, 20);
    border-radius: 4px;
    transition: 0.3s;
}

    .email-link-button:hover {
        cursor: pointer;
        background-color: rgb(238, 36, 69);
    }

.email-link-button-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: white;
    font-family: Santral Medium;
}

@media only screen and (max-width: 768px) {
    .email-confirmation-wrap {
        width: 90%;
        padding: 0px;
        border: none;
    }
    
    .email-confirmation-checkmark {
        margin-bottom: 0px;
    }

    .email-confirmation-header {
        display: inline;
    }

    .email-confirmation-text {
        margin-top: 20px;
        font-size: 14px;
    }
}
/*End of resend email confirmation styles*/

@media only screen and (max-width: 1280px) {
    .nav-option-wrap-scroll {
        min-width: 112px;
    }

    .nav-option-wrap-center-scroll {
        min-width: 50px;
    }
}

@media only screen and (max-width: 1150px) {
    .search-bar-wrap-mouseover {
        max-width: 100px;
    }

    .nav-option-wrap {
        min-width: 112px;
    }

    .nav-option-wrap-center-scroll {
        min-width: 50px;
    }
    
    .side-menu-icon-wrap {
        width: 120px;
    }

    .side-menu-icon-wrap-active {
        width: max(26vw, 400px);
    }

    .dropdown-right-column-3 {
        display: none;
    }
    
    .dropdown-left-column {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dropdown-right-column-1 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dropdown-right-column-2 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-dropdown-button-main {
        width: 712px;
    }
}

@media only screen and (max-width: 920px) {
    .navigation-bar-scroll {
        column-gap: 8px;
    }

    .nav-option-wrap-scroll {
        min-width: 0px;
    }

    .nav-option-wrap-center-scroll {
        min-width: 50px;
    }

    .nav-text {
        white-space: nowrap;
    }

    .nav-down-arrow-scroll {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    body {
        height: 100dvh;
        overscroll-behavior: contain;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
         padding-bottom: 100px;
         background-color: transparent;
    }

    .top-bar {
        position: relative;
        z-index: initial;
    }

    .mobile-nav-icon-search-bar-wrap-disappear {
        transform: translateY(-100%);
        opacity: 0;
        z-index: -1;
    }

    .mobile-scroll-icon-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 40px;
    }

    .mobile-scroll-icon {
		display: block;
		height: 4px;
		width: 60px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		background-color: rgb(200, 200, 200);
		border-radius: 10px;
    }

    .top-section {
        height: 102px;
        margin-bottom: 0px;
    }
    
    .decoration-bar {
        position: fixed;
        top: 0px;
        height: 3px;
        z-index: 3;
    }

    .header {
        position: fixed;
        width: 100%;
        background: linear-gradient(rgb(230, 230, 230), white 80%);
    }

    .top-bar {
        position: relative;
        border-bottom: 2px solid rgb(238, 36, 69);
    }
    
    .top-bar-scroll-mobile {
        background-color: rgb(40, 40, 40);
    }

    .top-bar-scroll-mobile > .mobile-logo-wrap {
        color: white;
    }

    .top-bar-scroll-mobile > .mobile-logo-wrap > .mobile-logo {
        filter: invert(100%);
    }

    .top-bar-scroll-mobile > .search-bar-wrap ~ .mobile-nav-button {
        filter: brightness(0) invert(100%);
    }

    .top-bar-scroll-mobile > .decoration-bar {
        display: none;
    }

    .top-bar-scroll-mobile ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .user-icon-notification-wrap > .side-menu-icon {
        filter: brightness(0) invert(100%);
    }

    .top-bar-scroll-mobile ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .side-menu-icon {
        filter: brightness(0) invert(100%);
    }
    
        .top-bar-scroll-mobile ~ .side-menu-icon-wrap > .side-menu-icon-individual-wrap > .side-menu-icon:hover {
            filter: brightness(0) invert(100%);
        }
    
    .mobile-logo-wrap {
        display: flex;
        margin-left: 2px;
        text-decoration: none;
        color: rgb(100, 100, 100);
        overflow: hidden;
    }

    .mobile-logo {
        position: relative;
        top: 5px;
        display: inline-block;
        height: 50px;
        width: 50px;
        background-image: url("https://aurummarketplace.com/Images/logo-buffer-transform-black.svg");
        background-size: cover;
        filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(200deg) brightness(94%) contrast(91%);
    }

    .mobile-logo-title-wrap {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .mobile-logo-title {
        position: relative;
        top: 3px;
        font-family: SterlingDisplay Roman;
        font-size: 24px;
    }

    .mobile-nav-icon-search-bar-wrap {
        position: absolute;
        top: 52px;
        left: 0px;
        display: flex;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        box-sizing: border-box;
		overflow-x: scroll;
		overflow-y: hidden;
        background-color: rgb(250, 250, 250);
        z-index: -1;
        transition: width 0.3s,
                    transform 0.3s,
                    opacity 0.3s;
    }

    .mobile-nav-icon-search-bar-wrap::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav-button {
        position: relative;
        top: 10px;
        display: block;
        height: 30px;
        width: 30px;
        padding-right: 10px;
    }

    .search-bar-wrap {
        left: 0px;
        min-width: calc(100% - 50px);
        box-sizing: border-box;
    }
        
    .search-bar-wrap:hover > .search-bar {
        background-color: white;
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-left: none;
    }

    .search-bar-wrap-mouseover {
        max-width: none;
    }
    
    .search-bar-wrap-mobile-shrink {
        min-width: 40%;
    }

    .search-bar {
        position: relative;
        height: 40px;
        max-width: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-sizing: border-box;
        padding-top: 2px;
        padding-left: 6px;
        padding-right: 6px;
        margin-top: auto;
        margin-bottom: auto;
        font-family: Nunito;
        font-size: 14px;
        background-color: white;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-left: none;
        border-radius: 0px 4px 4px 0px;
    }

    .search-bar:focus {
        outline: none;
    }

    .search-bar::-webkit-search-cancel-button {
        position: relative;
        bottom: 1px;
        height: 20px;
        width: 20px;
        margin-right: 5px;
        background-image: url("https://aurummarketplace.com/Images/x-mobile.svg");
        filter: invert(50%);
    }
    
    .search-bar-scroll {
        color: rgb(60, 60, 60);
        background-color: white;
    }
    
    .search-button {
        position: relative;
        top: 0px;
        height: 40px;
        min-width: 36px;
        margin-top: auto;
        margin-bottom: auto;
        padding: 0px 0px 0px 0px;
        background-color: white;
        border-right: none;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-right: none;
        border-radius: 4px 0px 0px 4px;
        overflow: hidden;
        z-index: 1;
    }

    .magnifying-glass-wrap {
        display: inline-block;
        height: 28px;
        width: 28px;
        margin-right: 1px;
        background-color: rgb(200, 200, 200);
        border-radius: 10px;
        transition: 0.2s;
    }
    
        .magnifying-glass-wrap:hover {
            height: 35px;
            width: 34px;
            background-color: rgb(68, 68, 68);
            border-radius: 0px
        }
    
    .magnifying-glass {
        position: absolute;
        top: calc(50% - 10px);
        right: 8px;
        height: 20px;
        width: 20px;
        filter: none;
    }
    
        .magnifying-glass:hover {
            cursor: pointer;
            filter: none;
        }
    
    .search-bar-carousel-category {
	    display: flex;
		justify-content: left;
	    align-items: center;
		margin: 0 0 0 0;
    }

    .search-bar-carousel-category-button {
		display: flex;
	    align-items: center;
        height: calc(70% - 2px);
        text-decoration: none;
		margin: 0 0 0 0.5em;
		padding: 0 1em 0 1em;
        height: 32px;
		color: rgb(120, 120, 120);
        font-family: Nunito;
        font-size: 0.8em;
		white-space: nowrap;
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-radius: 4px;
        box-sizing: border-box;
		transition: background-color 0.3s,
					color 0.3s;
    }

    .sb-category-button-active {
		color: rgb(120, 120, 120);
		background-image: linear-gradient(to bottom right, rgb(220, 220, 220), rgb(240, 240, 240));
    }

    .search-bar-carousel-link-container {
	    display: flex;
		justify-content: left;
	    align-items: center;
		width: 0;
		height: 100%;
		margin: 0 0 0 0;
        overflow: hidden;
		opacity: 0;
		transition: width 0.3s,
					opacity 0.5s;
		pointer-events: none;
    }

    .search-bar-carousel-link {
		display: flex;
	    align-items: center;
        height: 28px;
        text-decoration: none;
		margin: 0 0 0 0.5em;
		padding: 0 1em 0 1em;
		color: rgb(120, 120, 120);
        font-family: Nunito;
        font-size: 0.7em;
        box-sizing: border-box;
        background-color: rgb(250, 250, 250);
        border: 1px solid rgba(0, 0, 0, 0.22);
        border-radius: 4px;
        white-space: nowrap;
    }

    .sb-link-button-active {
		color: rgb(20, 20, 100);
    }

    .top-bar-header {
        display: none;
    }

    .new-items-drop-wrap {
        display: none;
    }

    @keyframes typing {
        from { width: 0 }
        to { width: 197px }
    }
    
    .side-menu-icon:hover {
        filter: none;
    }

    .side-menu-icon-wrap-active {
        width: 100%;
    }
    
    .side-menu-icon-wrap-active > .side-menu-icon-individual-wrap > .side-menu-icon:hover {
        filter: brightness(0) invert(100%);
    }
    
    .logo {
        display: none;
    }

    .navigation-bar {
        position: fixed;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: calc(100% + var(--safe-area-bottom));
        width: 90%;
        padding-top: 66px;
        padding-bottom: 200px;
        box-sizing: border-box;
        background-color: rgb(250, 250, 250);
        visibility: hidden;
        opacity: 0;
        overflow-y: scroll;
        transform: translateX(0px);
        z-index: 6;
    }

    .navigation-bar-show {
        visibility: visible;
        opacity: 1;
    }

    .navigation-bar-scroll {
        position: fixed;
        color: rgb(80, 80, 80);
    }

    .navigation-bar .nav-option-wrap {
        display: none;
    }

    .navigation-bar-mobile-tint {
        display: block;
        height: calc(100% + var(--safe-area-bottom) - 102px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .nav-bar-mobile-tint-active {
        pointer-events: all;
        opacity: 1;
    }

    .nav-bar-mobile {
        display: block;
    }

    .navigation-bar {
        transform: translateX(-100%);
    }

    .navigation-bar-show {
        transform: translateX(0px);
    }

    .nav-option-wrap-mobile {
        width: calc(100% - 40px);
        margin: auto;
        padding: 12px 0px 12px 0px;
        color: rgb(100, 100, 100);
        box-sizing: border-box;
        border-bottom: 1px solid rgb(0, 0, 0, 0.22);
        transform: translateX(-100px);
        transition: transform 0.8s;
    }

    .navigation-bar-show .nav-option-wrap-mobile {
        transform: translateX(0px);
    }

    .nav-option-mobile {
        display: flex;
        justify-content: space-between;
    }

    .nav-text-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: Montserrat;
        font-size: 12px;
    }

    .nav-link-mobile {
        width: 100%;
        text-decoration: none;
        color: rgb(100, 100, 100);
    }

    .nav-arrow-right {
        margin-top: auto;
        margin-bottom: auto;
        height: 10px;
        width: 10px;
        filter: brightness(0%) invert(50%);
    }

    .nav-mobile-bottom {
        padding-top: 10px;
    }

    .nav-option-wrap-mobile-bottom {
        padding: 0px 0px 4px 0px;
        border: none;
    }

    .nav-bottom-link {
        text-decoration: none;
        color: rgb(100, 100, 100);
    }

    .nav-bottom-icon {
        height: 24px;
        width: 24px;
        padding-right: 2px;
        vertical-align: middle;
    }

    .nav-sign-in-icon {
        position: relative;
        right: 5px;
    }
    
    .nav-contact-us-icon {
        height: 14px;
        width: 14px;
        filter: brightness(0%) invert(40%);
    }
    
    .nav-bottom-text {
        font-family: Nunito;
        font-size: 11px;
        vertical-align: middle;
    }

    .nav-sign-in-text {
        position: relative;
        right: 9px;
    }

    .nav-pop-up-window {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        padding-top: 66px;
        background-color: rgb(250, 250, 250);
        box-sizing: border-box;
        overflow: hidden;
        opacity: 0;
        transform: translateX(-100%);
        transition: 0.3s;
    }

    .nav-pop-up-window-active {
        opacity: 1;
        transform: translateX(0%);
    }

    .nav-pop-up-header {
        display: inline-block;
        width: 100%;
        padding: 15px 0px 10px 20px;
        color: rgb(100, 100, 100);
        font-family: Montserrat;
        font-size: 16px;
        box-sizing: border-box;
        letter-spacing: 1px;
        border-bottom: 1px solid rgb(0, 0, 0, 0.22);
    }

    .nav-pop-up-window .nav-option-wrap-mobile {
        width: 100%;
        padding: 10px 0px 10px 30px;
        border: none;
    }

    .pop-up-link {
        display: inline-block;
        width: 100%;
        text-decoration: none;
    }

    .pop-up-text {
        color: rgb(100, 100, 100);
        font-family: Nunito;
        font-size: 12px;
    }

    .pop-up-arrow-right {
        height: 8px;
        width: 8px;
        filter: brightness(0%) invert(40%);
    }

    .nav-x-button-wrap {
        top: 20px;
        left: 15px;
        height: 16px;
        width: 16px;
        display: block;
        filter: brightness(0%) invert(50%);
    }

    .nav-x-button {
        height: 100%;
        width: 100%;
    }
    
    .pop-up-back-button-wrap {
        position: absolute;
        top: 20px;
        right: 15px;
        height: 18px;
        width: 18px;
        padding: 5px;
        z-index: 1;
    }

    .pop-up-back-button {
        position: relative;
        top: 2px;
        left: 1px;
        height: 14px;
        width: 14px;
        filter: brightness(0%) invert(50%);
    }

    .nav-dropdown-container {
        display: none;
    }

    .nav-bar-socials-wrap {
        position: absolute;
        bottom: calc(0px + var(--safe-area-bottom));
        display: flex;
        justify-content: space-around;
        height: 40px;
        width: 100%;
        border-top: 1px solid rgb(0, 0, 0, 0.22);
        opacity: 0;
        transform: translateY(40px);
        transition: transform 0.5s, opacity 0.5s;
    }

    .nav-bar-socials-wrap-active {
        opacity: 1;
        transform: translateY(0px);
    }

    .nav-bar-social-link {
        flex: 1 1 0%;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-bar-social-image {
        margin: auto;
        height: 40%;
        filter: invert(50%)
    }

    .side-menu-tint {
        height: calc(100dvh + var(--safe-area-bottom));
    }

    .side-menu {
        width: 100%;
    }

    .side-menu-active {
        height: calc(100dvh + var(--safe-area-bottom));
    }

    .x-button-wrap {
        top: 20px;
        left: 20px;
        height: 16px;
        width: 16px;
        padding: 5px;
        border-radius: 20px;
        z-index: 2;
    }

    .side-menu-x-button-wrap {
        top: 20px;
        left: auto;
        right: 20px;
    }

    .x-button {
        background-image: url("https://aurummarketplace.com/Images/x-mobile.svg");
        filter: invert(22%) sepia(99%) saturate(0%) hue-rotate(159deg) brightness(97%) contrast(78%);
        transform: scale(0.9);
    }

    .user-login-header {
        padding-top: 50px;
    }

    .user-login-create-account-button {
        font-family: Nunito;
        font-size: 12px;
        font-weight: 500;
    }

        .user-login-create-account-button:hover:after {
            transform: scaleX(0);
        }

    .user-login-sign-in-button {
        font-family: Nunito;
        font-size: 12px;
        font-weight: 500;
    }

        .user-login-sign-in-button:hover:after {
            transform: scaleX(0);
        }

    .sign-in-button {
        font-family: Nunito;
        font-size: 12px;
        font-weight: 500;
    }

    .favorite-item-sign-in-header {
        padding-top: 50px;
    }

    .favorite-item-sign-in-header > a {
        font-size: 12px;
    }

        .sign-in-button:hover:after {
            transform: scaleX(0);
        }

    .speed-up-checkout {
        padding-top: 50px;
    }

    .speed-up-checkout > p {
        margin-bottom: 10px;
    }

    .speed-up-checkout > a {
        width: 62px;
    }

    .signed-in-user-wrap {
        overflow-y: scroll;
    }

    .signed-in-link {
        font-size: 12px;
    }

    .signed-in-bottom-padding {
        min-height: 300px;
    }
    
    .side-menu-item-window::after {
        content: "";
        display: inline-block;
        height: 200px;
        width: 100%;
    }

    .side-menu-item.shopping-bag-item {
        grid-template-columns: 1fr 2fr;
    }

    .side-menu-item-title {
        font-size: 12px;
        line-height: 14px;
    }

    .side-menu-item-price {
        font-family: Nunito;
    }

    .shopping-bag-quantity {
        bottom: 28px;
        font-family: Nunito;
    }

    .side-menu-remove-button {
        bottom: 14px;
        font-family: Nunito;
    }
    
    .total-price-checkout-button-wrap {
        top: calc(100dvh - 141px);
        bottom: auto;
        padding-bottom: 20px;
    }
    
    .shopping-bag-total-price {
        font-family: Nunito;
        font-size: 14px;
    }

    .side-menu .sign-in-section {
        padding-top: 40px;
    }

    .side-menu .sign-in-header {
        padding-top: 20px;
    }

    .create-account-window {
        height: calc(100dvh - 260px);
        overflow-y: scroll;
    }
}

@media only screen and (max-width: 350px) {
    .top-bar-header {
        width: 50px;
    }

    .typewriter {
        animation: 
          typing 1s steps(8, end),
          blink-caret .75s step-end infinite;
    }
    
    /* The typing effect */
    @keyframes typing {
        from { width: 0 }
        to { width: 50px }
    }
    
}

/*************************Start of Heart Animation Styles*************************/
/*This selects the label that corresponds to the id = 'heart-animation' checkbox*/
.heart-animation + label {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    filter: none;
    cursor: pointer;
  
    &:before, &:after {
      position: absolute;
      z-index: -1;
      top: 50%; left: 50%;
      border-radius: 50%;
      content: '';
    }
  }
  
  .heart-animation {
    vertical-align: middle;
    display: none;
  }
  
  /*This selects the img inside the label element and applies the animation as well as
  the filter which turns the heart red when the  checkbox is checked.*/
  .heart-animation:checked + label > img {
    animation: heart 0.8s cubic-bezier(.17, .89, .32, 1.49);
  }
  /*******************************************************************************/
  
  .heart-animation:checked + label {
    &::before, &::after {
      animation: bubble 1s;
      animation-timing-function: cubic-bezier(.21, .61, .35, 1);
    }
  
    &::before {
      will-change: transform, border-color, border-width;
      animation-name: bubble;
    }
  
    &::after { animation-name: particles; }
  }
  
  /*Globally defines CSS variables. CSS variables always start with --. These
  variables control various aspects of the animation.*/
  :root {
    --bubble-d: 4.5rem; /* bubble diameter */
    --bubble-r: calc(0.5 * var(--bubble-d)); /* bubble radius (50% of --bubble-d) */
  
    /*These variables represent the paricle diameter and the particle radius and the
    particle distance from center.*/
    --particle-d: 0.375rem;
    --particle-r: calc(0.5 * var(--particle-d));
    --particle-center-offset: 1;
  
    /*To create an rainbow effect, use the color format 0, and
    increase the angle by 45deg for each next particle. This will create a nice
    rainbow gradient. Don't use --particle-color for that - must be hard coded.*/
    --particle-color: rgb(238, 36, 69);
  
    /*These variables represent the initial state of the particles before click.*/
    --shadow-0: calc(var(--particle-center-offset) * var(--bubble-r) * cos(0deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(0deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-1: calc(var(--particle-center-offset) * var(--bubble-r) * cos(45deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(45deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-2: calc(var(--particle-center-offset) * var(--bubble-r) * cos(90deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(90deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-3: calc(var(--particle-center-offset) * var(--bubble-r) * cos(135deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(135deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-4: calc(var(--particle-center-offset) * var(--bubble-r) * cos(180deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(180deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-5: calc(var(--particle-center-offset) * var(--bubble-r) * cos(225deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(225deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-6: calc(var(--particle-center-offset) * var(--bubble-r) * cos(270deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(270deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-7: calc(var(--particle-center-offset) * var(--bubble-r) * cos(315deg)) calc(var(--particle-center-offset) * var(--bubble-r) * sin(315deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
  
    --shadow-8: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(60deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(60deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-9: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(105deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(105deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-10: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(150deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(150deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-11: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(195deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(195deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-12: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(240deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(240deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-13: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(285deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(285deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-14: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(330deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(330deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
    --shadow-15: calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * cos(375deg)) calc((0.1 + var(--particle-center-offset)) * var(--bubble-r) * sin(375deg)) 0 calc(-1 * var(--particle-r)) var(--particle-color);
  }
  
  /*******************************************************************************/
  /*This section controls the initial, transitory, and final values of the bubble.*/
  @keyframes bubble {
    15% {
      border-color: #ff365e;
      border-width: var(--bubble-r);
      transform: scale(1);
    }
    30%, 100% {
      border-color: #ff365e;
      border-width: 0;
      transform: scale(1);
    }
  }
  
  .heart-animation + label::before {
    margin: calc(-1 * var(--bubble-r)); /* margin is the negative value of --bubble-r */
    width: var(--bubble-d); /* Use --bubble-d for width */
    height: var(--bubble-d); /* Use --bubble-d for height */
    box-sizing: border-box;
    border: solid var(--bubble-r) rgb(60, 60, 60);
    transform: scale(0);
  }
  /*******************************************************************************/
  
  /*******************************************************************************/
  /*This section controls initial, transitory, and final stages of the particles.*/
  @keyframes particles {
    0%, 20% {
      opacity: 0;
    }
    25% {
      opacity: 1;
      box-shadow: 
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(0deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(0deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(45deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(45deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(90deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(90deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(135deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(135deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(180deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(180deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(225deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(225deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(270deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(270deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * cos(315deg)) calc((var(--particle-center-offset) - 0.3) * var(--bubble-r) * sin(315deg)) 0 0 var(--particle-color),
      
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(60deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(60deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(105deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(105deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(150deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(150deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(195deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(195deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(240deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(240deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(285deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(285deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(330deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(330deg)) 0 0 var(--particle-color),
        calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * cos(375deg)) calc((var(--particle-center-offset) - 0.2) * var(--bubble-r) * sin(375deg)) 0 0 var(--particle-color);
      }
  }
  
  .heart-animation + label:after {
    opacity: 0;
    margin: calc( -1 * var(--particle-r));
    width: var(--particle-d); height: var(--particle-d);
  
    box-shadow: 
      var(--shadow-0),
      var(--shadow-1),
      var(--shadow-2),
      var(--shadow-3),
      var(--shadow-4),
      var(--shadow-5),
      var(--shadow-6),
      var(--shadow-7),
      var(--shadow-8),
      var(--shadow-9),
      var(--shadow-10),
      var(--shadow-11),
      var(--shadow-12),
      var(--shadow-13),
      var(--shadow-14),
      var(--shadow-15);
  }
  /*******************************************************************************/
  
  /*******************************************************************************/
  /*This section controls the initial, transitory, and final states of the heart.*/
  /*This defines the heart size animation. 0% represents the start of the animation,
  so at 0% of the animation the heart will be at scale(0.5), at 50% of the animation
  the heart will be at scale(1.2), and at 100% of the animation the heart will be at
  its original size.*/
  @keyframes heart {
    0% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1.2);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }

  .disable-animation, 
  .disable-animation *, 
  .disable-animation::before, 
  .disable-animation::after {
    animation: heart 0s,
               bubble 0s,
               particles 0s !important;
}
  /**************************End of Heart Animation Styles**************************/